<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
      <el-card class="box-card">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>用户管理</el-breadcrumb-item>
              <el-breadcrumb-item>角色列表</el-breadcrumb-item>
          </el-breadcrumb>
          <el-row :gutter="20">
              <el-col :span="12">
                  <el-input placeholder="请输入内容" v-model="search">
                      <el-button slot="append" icon="el-icon-search" ></el-button>
                  </el-input>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="adddialogVisible = true">增加角色</el-button>
              </el-col>
          </el-row>
          <el-table :data="roleList" border style="width: 100%">
              <el-table-column type="index"  label="序号" > </el-table-column>
              <el-table-column prop="name" label="角色名称" > </el-table-column>
              <el-table-column  label="操作">
                  <template  slot-scope="{row}">
                    <el-tooltip content="分配权限"  effect="light" >
                      <el-button  @click="handleSetPerm(row)" type="info" icon="el-icon-setting" size="mini"></el-button>
                    </el-tooltip>
                    <el-tooltip content="修改"  effect="light" >
                      <el-button   type="info" icon="el-icon-edit" size="mini"></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除"  effect="light" >
                      <el-button  type="danger" icon="el-icon-delete" size="mini"></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
          </el-table>
          <el-pagination
             @current-change="handleCurrentChange"
             :current-page="pagination.page"
             :page-size="pagination.size"
             layout="total, prev, pager, next, jumper"
             :total="pagination.total">
          </el-pagination>
        <!-- 添加对话框 -->
      <el-dialog title="增加" :visible.sync="adddialogVisible" @close="resetForm('add')">
      <el-form :model="addForm" :rules="addRules" ref="add" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
          <!-- 分配权限窗口 -->
        <el-dialog
             :title="currentRow.name  +  '角色分配权限'"
             :visible.sync="setPermdialogVisible" @close="resetTree">
              <el-tree :data="dataList"
              node-key="id"
              :default-checked-keys="selectedIds"
              ref="tree" :props="defaultProps"
              show-checkbox></el-tree>
              <span slot="footer" class="dialog-footer">
              <el-button @click="setPermdialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="setPerm">确 定</el-button>
             </span>
        </el-dialog>
      </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getList()
  },
  data() {
    return {
      search: '',
      adddialogVisible: false,
      addForm: {
        name: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
        ]
      },
      roleList: [
      ],
      pagination: {
        total: 0,
        size: 20,
        page: 1
      },
      // 树
      dataList: [
      ],
      setPermdialogVisible: false,
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      selectedIds: [],
      currentRow: {}
    }
  },
  methods: {
    resetForm(name) {
      // const name = 'addPerm'
      // console.log('++++++++++++++++++++')
      console.log(name)
      this.$refs[name].resetFields()
    },
    resetTree() {
      this.dataList = []
      // this.$refs.tree
      this.$refs.tree.setCheckedKeys([])
      this.currentRow = {}
    },
    async getList(page = 1) {
      if (!page) {
        page = 1
      }
      // all roles
      const { data: response } = await this.$http.get('users/roles/', {
        params: {
          page,
          search: this.search
        }
      })
      if (response.code) {
        return this.$message.error(response.message)
      }
      this.roleList = response.results
      this.pagination = response.pagination
    },
    handleCurrentChange(page) {
      this.getList(page)
    },
    add() {
      const name = 'add'
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          const { data: response } = await this.$http.post('users/roles/', this.addForm)
          if (response.code) {
            return this.$message.error(response.message)
          }
          this.getList(this.pagination.page)
          this.adddialogVisible = false
          this.$message('角色添加成功')
          this.getList()
        }
      })
    },
    async handleSetPerm(row) {
      // 1 显示所有可用的权限们 2 我自己有什么权限，打勾
      const { id } = row
      const { data: response } = await this.$http.get(`users/roles/${id}/perms/`)
      if (response.code) {
        return this.$message.error(response.message)
      }
      this.dataList = response.allPerms
      this.selectedIds = response.permissions
      this.currentRow = response
      this.setPermdialogVisible = true
    },
    async setPerm() {
      const { id } = this.currentRow
      console.log(this.$refs.tree.getCheckedKeys())
      const { data: response } = await this.$http.patch(`users/roles/${id}/`, {
        permissions: this.$refs.tree.getCheckedKeys()
      })
      if (response.code) {
        return this.$message.error(response.message)
      }
      this.setPermdialogVisible = false
    }
  }
}
</script>

<style>

</style>